<!Doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <title>工具栏</title>
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link th:href="@{/js/Toolbal.js}" rel="stylesheet">

    <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
    <script type="text/javascript">
        mxBasePath = '../static';
    </script>

    <!-- 引入支持库文件 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/mxClient.js}"></script>


    <!-- 示例代码 -->
    <script type="text/javascript">
        //  程序在此方法中启动
        function up(obj){
                var div1=document.getElementById("tbContainer");
                console.log(1);
                if(div1.style.display=="block"){
                    div1.style.display="none";
                    obj.src="img2/collapsed.gif";
                }else{
                    div1.style.display="block";
                    obj.src="img2/expanded.gif";
                }
        }
        function up1(obj){
            var div1=document.getElementById("tbContainer1");
            console.log(1);
            if(div1.style.display=="block"){
                div1.style.display="none";
                obj.src="img2/collapsed.gif";
            }else{
                div1.style.display="block";
                obj.src="img2/expanded.gif";
            }
        }
        function mxIconSet(state)
        {
            this.images = [];
            var graph = state.view.graph;



            // Delete
            var img = mxUtils.createImage('img2/delete2.png');
            img.setAttribute('title', 'Delete');
            img.style.position = 'absolute';
            img.style.cursor = 'pointer';
            img.style.width = '16px';
            img.style.height = '16px';
            img.style.left = (state.x + state.width) + 'px';
            img.style.top = (state.y - 16) + 'px';

            mxEvent.addGestureListeners(img,
                mxUtils.bind(this, function(evt)
                {
                    // Disables dragging the image
                    mxEvent.consume(evt);
                })
            );

            mxEvent.addListener(img, 'click',
                mxUtils.bind(this, function(evt)
                {
                    graph.removeCells([state.cell]);
                    mxEvent.consume(evt);
                    this.destroy();
                })
            );

            state.view.graph.container.appendChild(img);
            this.images.push(img);
        };

        mxIconSet.prototype.destroy = function()
        {
            if (this.images != null)
            {
                for (var i = 0; i < this.images.length; i++)
                {
                    var img = this.images[i];
                    img.parentNode.removeChild(img);
                }
            }

            this.images = null;
        };
        function main()
        {
            //定义新连接的图标
            mxConnectionHandler.prototype.connectImage = new mxImage('img2/connector.gif', 16, 16);
            var deleteImage = new mxImage('img2/forbidden.png', 16, 16);
            // 检测浏览器兼容性
            if (!mxClient.isBrowserSupported())
            {
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // 创建工具栏容器
                var tbContainer = document.createElement('div');
                tbContainer.style.position = 'absolute';
                tbContainer.setAttribute("id","tbContainer");
                tbContainer.style.overflow = 'scroll';
                tbContainer.style.display = 'block';
                tbContainer.style.padding = '2px';
                tbContainer.style.left = '0px';
                tbContainer.style.top = '26px';
                tbContainer.style.width = '80px';
                tbContainer.style.boxSizing = 'border-box';
                tbContainer.style.bottom = '0px';
                tbContainer.style.paddingLeft = '10px';

                // tbContainer.style.borderRight = '2px solid #000';
                tbContainer.style.backgroundColor = 'white';

                document.body.appendChild(tbContainer);

                // 创建工具栏监听工具
                var toolbar = new mxToolbar(tbContainer);
                toolbar.enabled = false
                // 创建工具栏容器
                var tbContainer1 = document.createElement('div');
                tbContainer1.style.position = 'absolute';
                tbContainer1.setAttribute("id","tbContainer1");
                tbContainer1.style.overflow = 'scroll';
                tbContainer1.style.padding = '2px';
                tbContainer1.style.right = '0px';
                tbContainer1.style.top = '26px';
                tbContainer1.style.width = '80px';
                tbContainer1.style.bottom = '0px';
                tbContainer.style.boxSizing = 'border-box';
                tbContainer1.style.paddingLeft = '10px';
                tbContainer1.style.paddingRight = '5px';
                // 创建工具栏监听工具
                var toolbar1 = new mxToolbar(tbContainer1);
                toolbar1.enabled = false

                // 在图形中创建容器
                container = document.createElement('div');
                container.style.position = 'absolute';
                // container.style.backgroundColor = '#578ebe';
                container.style.overflow = 'scroll';
                container.style.left = '85px';
                container.style.top = '26px';
                container.style.right = '85px';
                container.style.bottom = '0px';
                // container.style.background = 'url("editors/images/grid.gif")';
                container.style.background = 'url("img2/grid.gif")';
                // container.style.backgroundColor = 'white';


                document.body.appendChild(container);

                // 解决IE浏览器忽略的样式
                if (mxClient.IS_QUIRKS)
                {
                    document.body.style.overflow = 'scroll';
                    new mxDivResizer(tbContainer);
                    new mxDivResizer(container);
                }

                // 在容器中创建图形和模型
                var model = new mxGraphModel();
                var graph = new mxGraph(container, model);
                var typeName=[];
                var imgDivArray=[];
                $.ajax({
                    type: "GET",
                    url: "/power/energyType/getAllEnergyType",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var energyList=data;
                        for(var i=0;i<energyList.length;i++){
                            var img = mxUtils.createImage('img2/arrowImg2.png');
                            var imgDiv = document.createElement("div");
                            imgDiv.style.position = 'relative';
                            imgDiv.style.left = "20px";
                            imgDiv.style.width = "40px";
                            imgDiv.style.height = "40px";
                            imgDiv.style.marginBottom = "10px";
                            imgDiv.style.backgroundColor = "#568dbd";
                            imgDiv.appendChild(img);
                            var img1 = mxUtils.createImage(energyList[i].iconPath);
                            img1.style.width = '15px';
                            img1.style.height = '15px';
                            var imgDiv1 = document.createElement("div");
                            imgDiv1.style.position = 'absolute';
                            imgDiv1.appendChild(img1);
                            imgDiv1.style.top = "50%";
                            imgDiv1.style.left = "50%";
                            imgDiv1.setAttribute('title',energyList[i].typeName);
                            imgDiv1.style.transform = "translate(-50%,-50%)";
                            imgDiv.appendChild(imgDiv1);
                            img.style.width = '40px';
                            img.style.height = '40px';
                            img.style.zIndex = "999";
                            img.setAttribute("title",energyList[i].typeName);
                            tbContainer1.appendChild(imgDiv);
                            document.body.appendChild(tbContainer1);
                            var graphF = function(evt)
                            {
                                var x = mxEvent.getClientX(evt);
                                var y = mxEvent.getClientY(evt);
                                var elt = document.elementFromPoint(x, y);

                                // for (var i = 0; i < graphs.length; i++)
                                // {
                                if (mxUtils.isAncestorNode(graph.container, elt))
                                {
                                    return graph;
                                }
                                // }

                                return null;
                            };
                            typeName.push(energyList[i].typeName);
                            console.log(typeName);
                            // var funct = function(graph, evt, target, x, y)
                            // {
                            //     var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                            //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                            //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                            //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                            //     cell.geometry.relative = true;
                            //     cell.edge = true;
                            //     var cells = graph.importCells([cell], x, y, target);
                            //
                            //     if (cells != null && cells.length > 0)
                            //     {
                            //         graph.scrollCellToVisible(cells[0]);
                            //         graph.setSelectionCells(cells);
                            //     }
                            // };

                            function funct(graph, evt,target, x, y)
                            {
                                console.log(imgDivArray[i]);
                                var cell = new mxCell(typeName[i-1],new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                                cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                                cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                                //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                                cell.geometry.relative = true;
                                cell.edge = true;
                                var cells = graph.importCells([cell], x, y, target);

                                if (cells != null && cells.length > 0)
                                {
                                    graph.scrollCellToVisible(cells[0]);
                                    graph.setSelectionCells(cells);
                                }
                            };
                            var dragElt = document.createElement('div');
                            dragElt.style.border = 'dashed black 1px';
                            dragElt.style.width = '120px';
                            dragElt.style.height = '40px';
                            imgDivArray.push(imgDiv);
                            console.log(imgDivArray);

                            var ds = mxUtils.makeDraggable(imgDivArray[i], graphF,funct, dragElt, null, null, graph.autoscroll, true);

                            // Redirects feature to global switch. Note that this feature should only be used
                            // if the the x and y arguments are used in funct to insert the cell.
                            ds.isGuidesEnabled = function()
                            {
                                return graph.graphHandler.guidesEnabled;
                            };
                            //
                            // // Restores original drag icon while outside of graph
                            ds.createDragElement = mxDragSource.prototype.createDragElement;
                        }
                    }
                })



                //去锯齿效果
                mxRectangleShape.prototype.crisp = true;
                // 显示导航线
                mxGraphHandler.prototype.guidesEnabled = true;
                // Defines the tolerance before removing the icons
                var iconTolerance = 20;

                // Shows icons if the mouse is over a cell
                graph.addMouseListener(
                    {
                        currentState: null,
                        currentIconSet: null,
                        mouseDown: function(sender, me)
                        {
                            // Hides icons on mouse down
                            if (this.currentState != null)
                            {
                                this.dragLeave(me.getEvent(), this.currentState);
                                this.currentState = null;
                            }
                        },
                        mouseMove: function(sender, me)
                        {
                            if (this.currentState != null && (me.getState() == this.currentState ||
                                me.getState() == null))
                            {
                                var tol = iconTolerance;
                                var tmp = new mxRectangle(me.getGraphX() - tol,
                                    me.getGraphY() - tol, 2 * tol, 2 * tol);

                                if (mxUtils.intersects(tmp, this.currentState))
                                {
                                    return;
                                }
                            }

                            var tmp = graph.view.getState(me.getCell());

                            // Ignores everything but vertices
                            if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell)))
                            {
                                tmp = null;
                            }

                            if (tmp != this.currentState)
                            {
                                if (this.currentState != null)
                                {
                                    this.dragLeave(me.getEvent(), this.currentState);
                                }

                                this.currentState = tmp;

                                if (this.currentState != null)
                                {
                                    this.dragEnter(me.getEvent(), this.currentState);
                                }
                            }
                        },
                        mouseUp: function(sender, me) { },
                        dragEnter: function(evt, state)
                        {
                            if (this.currentIconSet == null)
                            {
                                this.currentIconSet = new mxIconSet(state);
                            }
                        },
                        dragLeave: function(evt, state)
                        {
                            if (this.currentIconSet != null)
                            {
                                this.currentIconSet.destroy();
                                this.currentIconSet = null;
                            }
                        }
                    });

                //在图中，启用新的连接
                graph.setConnectable(false);
                graph.setMultigraph(false);
                var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                var styleEdge1 = mxUtils.clone(styleEdge);
                styleEdge1[mxConstants.STYLE_FONTCOLOR]="white";
                styleEdge1[mxConstants.STYLE_FONTSIZE]="14";
                styleEdge1[mxConstants.STYLE_STROKECOLOR]="white";
                // 按下回车和空格键停止编辑
                var keyHandler = new mxKeyHandler(graph);
                var rubberband = new mxRubberband(graph);
                var addVertex = function(name,icon, w, h, style)
                {
                    var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                    vertex.setVertex(true);
                    console.log(icon);
                    var img= addToolbarItem(graph, toolbar, vertex, icon);
                    console.log(img);
                    img.enabled = true;
                    img.style.width="40px";
                    img.setAttribute('title', name);
                    img.style.backgroundColor="#578ebe";
                };
                // var graphF = function(evt)
                // {
                //     var x = mxEvent.getClientX(evt);
                //     var y = mxEvent.getClientY(evt);
                //     var elt = document.elementFromPoint(x, y);
                //
                //     // for (var i = 0; i < graphs.length; i++)
                //     // {
                //     if (mxUtils.isAncestorNode(graph.container, elt))
                //     {
                //         return graph;
                //     }
                //     // }
                //
                //     return null;
                // };
                // var funct = function(graph, evt, target, x, y)
                // {
                //     var cell = new mxCell('冷', new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //     cell.geometry.relative = true;
                //     cell.edge = true;
                //     var cells = graph.importCells([cell], x, y, target);
                //
                //     if (cells != null && cells.length > 0)
                //     {
                //         graph.scrollCellToVisible(cells[0]);
                //         graph.setSelectionCells(cells);
                //     }
                // };
                // var dragElt = document.createElement('div');
                // dragElt.style.border = 'dashed black 1px';
                // dragElt.style.width = '120px';
                // dragElt.style.height = '40px';
                //
                // var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
                //
                // // Redirects feature to global switch. Note that this feature should only be used
                // // if the the x and y arguments are used in funct to insert the cell.
                // ds.isGuidesEnabled = function()
                // {
                //     return graph.graphHandler.guidesEnabled;
                // };
                //
                // // Restores original drag icon while outside of graph
                // ds.createDragElement = mxDragSource.prototype.createDragElement;
                // var addEdge = function(name,icon, w, h, style)
                // {
                //     var edge = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                //     edge.setEdge(true);
                //     var img= addToolbarItemEdge(graph, toolbar1, edge, icon);
                //     console.log(img);
                //     img.enabled = true;
                //     img.style.width="40px";
                //     img.setAttribute('title', name);
                //     img.style.backgroundColor="#578ebe";
                // };
                //插入线条设置连接图形
                $.ajax({
                    type: "GET",
                    url: "/power/relationship/getDragChart/" + 4,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var node = data.node;
                        var edge = data.edge;
                        var nodeLength = data.node.length;
                        var edgeLength = data.edge.length;
                        console.log(node);
                        console.log(edge);
                        console.log(nodeLength);

                        var styleName=[];
                        for(var i=0;i<nodeLength;i++){
                            var style = graph.getStylesheet().getDefaultVertexStyle();
                            var style1 = mxUtils.clone(style);
                            // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                            // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                            // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                            // style=mxUtils.clone(style);
                            // console.log(node[j].picPath);
                            style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
                            // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
                            style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;

                            style1[mxConstants.STYLE_STROKECOLOR]="transparent";
                            style1[mxConstants.STYLE_FILLCOLOR]="#578ebe";
                            style1[mxConstants.STYLE_FONTCOLOR]="white";
                            style1[mxConstants.STYLE_FONTSIZE]="14";


                            style1[mxConstants.LABEL_HANDLE_SIZE]=50;
                            style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
                            style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
                            style1[mxConstants.STYLE_IMAGE]=node[i].picPath;
                            styleName[i]='style'+i;
                            console.log(styleName[i]);
                            graph.getStylesheet().putCellStyle(styleName[i],style1);
                            addVertex(node[i].deviceName,node[i].picPath,100,80,styleName[i]);
                            // toolbar.addLine();
                            // var vertex = new mxCell(node[i].deviceName, new mxGeometry(0, 0, 100, 80), styleName[i]);
                            // vertex.setVertex(true);
                            //
                            // var img= addToolbarItem(graph, toolbar, vertex, node.picPath);
                            // img.enabled = true;
                            // img.style.width="80px";
                            // img.setAttribute('title', node[i].deviceName);
                        }
                    }
                })
                // var addVertex = function(name,icon, w, h, style)
                // {
                //     var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                //     vertex.setVertex(true);
                //
                //    var img= addToolbarItem(graph, toolbar, vertex, icon);
                //    console.log(img);
                //     // img.enabled = true;
                //     // img.style.width="80px";
                //     // img.setAttribute('title', name);
                // };
                // var style = graph.getStylesheet().getDefaultVertexStyle();
                // var style1 = mxUtils.clone(style);
                // // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                // // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                // // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                // // style=mxUtils.clone(style);
                // // console.log(node[j].picPath);
                // style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
                // // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
                // style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;
                //
                // style1[mxConstants.STYLE_STROKECOLOR]="transparent";
                // style1[mxConstants.STYLE_FILLCOLOR]="transparent";
                // style1[mxConstants.STYLE_FONTCOLOR]="black";
                // style1[mxConstants.STYLE_FONTSIZE]="14";
                // //
                // //
                // style1[mxConstants.LABEL_HANDLE_SIZE]=50;
                // style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
                // style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
                // style1[mxConstants.STYLE_IMAGE]='http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png';
                // graph.getStylesheet().putCellStyle('style1',style1);
                // addVertex('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 100, 80, 'style1');
                // addVertex('editors/images/rounded.gif', 100, 40, '');
                // addVertex('editors/images/ellipse.gif', 40, 40, '');
                // addVertex('editors/images/rhombus.gif', 40, 40, '');
                // addVertex('editors/images/triangle.gif', 40, 40, '');
                // addVertex('editors/images/cylinder.gif', 40, 40, '');
                // addEdge('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 30, 40, '');
                // toolbar.addLine();
                // graph.container.setAttribute('tabindex', '-1');
                // graph.container.focus();



                // var button = mxUtils.button('Create toolbar entry from selection', function(evt)
                // {
                //     if (!graph.isSelectionEmpty())
                //     {
                //         // 创建一个副本，并保存它的状态
                //         var cells = graph.getSelectionCells();
                //         var bounds = graph.getView().getBounds(cells);
                //
                //         // 添加、删除功能
                //         var funct = function(graph, evt, cell)
                //         {
                //             graph.stopEditing(false);
                //
                //             var pt = graph.getPointForEvent(evt);
                //             var dx = pt.x - bounds.x;
                //             var dy = pt.y - bounds.y;
                //
                //             var clones = graph.importCells(cells, dx, dy);
                //             graph.setSelectionCells(clones);
                //         }
                //
                //         // 创建拖动预览图标
                //         var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
                //         mxUtils.makeDraggable(img, graph, funct);
                //     }
                // });

                var deviceDiv=document.createElement("div");
                deviceDiv.innerHTML="设备列表";
                deviceDiv.style.fontSize="14px";
                deviceDiv.style.position="absolute";
                deviceDiv.style.top="0px";
                var deviceDiv1=document.createElement("div");
                deviceDiv1.innerHTML="属性列表";
                deviceDiv1.style.fontSize="14px";
                deviceDiv1.style.position="absolute";
                deviceDiv1.style.top="0px"
                deviceDiv1.style.right="10px";
                var img=document.createElement("img");
                img.setAttribute("src","img2/expanded.gif");
                img.setAttribute("onclick","up(this)");
                img.style.width="20px";
                img.style.height="20px";
                img.style.position="absolute";
                img.style.top="0px";
                img.style.left="65px";
                var img1=document.createElement("img");
                img1.setAttribute("src","img2/expanded.gif");
                img1.setAttribute("onclick","up1(this)");
                img1.style.width="20px";
                img1.style.height="20px";
                img1.style.position="absolute";
                img1.style.top="0px";
                img1.style.right="65px";
                document.body.appendChild(deviceDiv);
                document.body.appendChild(img);
                document.body.appendChild(img1);
                document.body.appendChild(deviceDiv1);
                // button.style.position = 'absolute';
                // button.style.left = '2px';
                // button.style.top = '2px';
                // document.body.appendChild(button);
            }
        }

        function addToolbarItem(graph, toolbar, prototype, image)
        {
            // 添加、删除功能
            var funct = function(graph, evt, cell)
            {
                graph.stopEditing(false);

                var pt = graph.getPointForEvent(evt);
                var vertex = graph.getModel().cloneCell(prototype);
                vertex.geometry.x = pt.x;
                vertex.geometry.y = pt.y;

                graph.addCell(vertex);
                graph.setSelectionCell(vertex);
            }
            // 创建拖动预览图标
            var img = toolbar.addMode(null, image, funct);
            mxUtils.makeDraggable(img, graph, funct);
            return img;
        }

        // function addToolbarItemEdge(graph, toolbar1, prototype, image)
        // {
        //     // 添加、删除功能
        //     var funct = function(graph, evt, cell)
        //     {
        //         graph.stopEditing(false);
        //
        //         var pt = graph.getPointForEvent(evt);
        //         var edge = graph.getModel().cloneCell(prototype);
        //         edge.geometry.x = pt.x;
        //         edge.geometry.y = pt.y;
        //
        //         graph.addCell(edge);
        //         graph.setSelectionCell(edge);
        //     }
        //     // 创建拖动预览图标
        //     var img = toolbar.addMode(null, image, funct);
        //     mxUtils.makeDraggable(img, graph, funct);
        //     return img;
        // }

    </script>
</head>

<!-- 页面载入后启动程序. -->
<body onload="main();">
</body>
</html>